<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_浮动相关基本知识</title>
    <style>
        .parent{
            border: 1px solid green;
        }
        .box{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: yellow;
            float: left;
        }
        .box2{
            background-color: blue;
            float: left;
        }
        .box3{
            background-color: red;
            float: left;
        }
    </style>
</head>
<body>
<!--
    浮动:
        在最初 浮动是用来实现文字环绕图片、文字环绕文件的效果,但是现在浮动是主流的页面布局方式之一
        元素浮动后的特点：
            1.脱离文档流。
            2.不管浮动前是什么元素,浮动后：默认宽高都是被内容撑开（尽可能小）,而且可以设置宽高
            3.不会独占一行，可以与其他元素共用一行。
            4.不会margin合并，也不会margin塌陷，能够完美的设置四个方向的margin和padding
            5.不会像行内块一样被当成文本处理（没有行内块的空白问题）。
        元素浮动后的影响。
            1.对兄弟元素的影响：后面的兄弟元素,会占据浮动元素之前的位置，在浮动元素的下面;对前面的兄弟元素无影响
            2.对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷;但父元素的宽度依然束缚浮动的元素
-->
    <div class="parent">
        <div class="box box1">div1</div>
        <div class="box box2">div2</div>
        <div class="box box3">div3</div>
    </div>



</body>
</html>
